<template>
  <div class="site">
    <my-header>
      <template #left>
        <van-icon name="arrow-left" @click="$router.back()" />
      </template>
      <template #center> 我的地址 </template>
      <template #right> <span class="header-right" @click="$router.push('/saveAddress')">新建地址</span> </template>
    </my-header>
    <div class="content">
      <van-swipe-cell v-for="(item, index) in list" :key="index">
        <van-checkbox
          v-model="item.isDefault"
          checked-color="#ee0a24"
        ></van-checkbox>
        <section>
          <p>{{ item.linkMan }} {{ item.mobile }}</p>
          <p class="foot">
            {{ item.cityStr }} {{ item.provinceStr }} {{ item.address }}
          </p>
        </section>
        <van-icon name="share" />
        <template #right>
          <van-button square type="danger" text="删除" @click="delect(item)" />
        </template>
      </van-swipe-cell>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import myHeader from "../../components/myHeader.vue";
import { getAddressList, delectAddress } from "../../api/secendPage/index";
import { Notify } from "vant";
export default {
  components: { myHeader },
  setup() {
    const data = reactive({
      list: [], // 地址列表
    });
    let token = localStorage.getItem("token");
    const info = () => {
      getAddressList({ token: token }).then((res) => {
        data.list = res.data;
      });
    };
    info(); // 进入页面调用地址列表的获取

    const delect = (val) => {
      // 删除地址的函数
      delectAddress({ token: token, id: val.id }).then((res) => {
        if (res.code == 0) {
          Notify({ type: "success", message: "删除成功！" });
          info();
        }
      });
    };
    return {
      ...toRefs(data),
      delect,
    };
  },
};
</script>
<style lang="scss" scoped>
.site {
  height: 100%;
  .header-right {
    font-size: 12px;
  }
  .content {
    height: calc(100% - 50px);
    :deep(.van-swipe-cell__wrapper) {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      border-bottom: 1px solid #f5f5f5;
      section {
        font-size: 14px;
        margin-left: 10px;
        flex: 1;
        p {
          width: 260px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .foot {
          margin-top: 20px;
          color: #999;
        }
      }
      .van-button {
        height: 100%;
      }
    }
  }
}
</style>